<template>
  <div>本地服务器。。。</div>
  <button @click="serv">请求数据</button>
  <button @click="ismsg">添加数据</button>
  <button @click="del">删除数据</button>
  <button @click="smsg">修改数据</button>
  <!-- <img :src="msg.data.imgUrl" alt="" /> -->
  <!-- <p>{{ msg.data[1].imgUrl }}</p> -->
  <template v-for="index in msg.data" :key="index.id">
    <div>
      <p>{{ index.id }}</p>
      <img :src="index.imgUrl" alt="" />
    </div>
  </template>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      msg: []
    }
  },
  created() {
    this.axi()
    // axios({
    //   method: 'get',
    //   url: 'http://localhost:3000/nowplaying'
    // }).then((res) => (this.msg = res))
    // console.log(this.msg)
  },
  methods: {
    serv() {
      axios.get('http://localhost:3000/banner').then((res) => {
        console.log(res)
      })
    },
    del() {
      axios({
        method: 'delete',
        url: 'http://localhost:3000/banner/8'
      })
      this.axi()
    },
    ismsg() {
      axios({
        method: 'post',
        url: 'http://localhost:3000/banner/',
        data: {
          imgUrl:
            'https://pic.maizuo.com/usr/movie/f31367bb1a275f032ea3793a0571d9e0.jpg?x-oss-process=image/quality,Q_70'
        }
      })
      this.axi()
    },
    smsg() {
      axios({
        method: 'patch',
        url: 'http://localhost:3000/banner/4',
        data: {
          imgUrl:
            'https://pic.maizuo.com/usr/movie/f31367bb1a275f032ea3793a0571d9e0.jpg?x-oss-process=image/quality,Q_70'
        }
      })
    },
    axi() {
      axios
        .get('http://localhost:3000/banner')
        .then((res) => {
          this.msg = res
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>
